<template>
  <div class="left">
    <div class="left_top">
      <div class="left_top_title">
        <div class="title-tip">
          <span class="font-lg">统计数据</span>
          <div class="flop font-md">
            累计处理
            <NumberCard
                class="NumberCard"
                :countStr="count"
                ref="numCard"
            ></NumberCard>
            件
          </div>
        </div>
      </div>
      <div class="left_top_content">
        <span class="position1 font-md">资产统计</span>
        <div class="position2">
          <div class="assetNum-item total">
            <div class="num font-bt" style="color: #00a4ff;">{{assetCount.total}}</div>
            <div class="label font-md">资产总数</div>
          </div>
          <div class="assetNum-item">
            <div class="num font-bt" style="color: #00ffc8;">{{assetCount.normal}}</div>
            <div class="label font-md">正常资产</div>
          </div>
          <div class="assetNum-item">
            <div class="num font-bt" style="color: #ffb700;">{{assetCount.doubtful}}</div>
            <div class="label font-md">可疑资产</div>
          </div>
          <div class="assetNum-item">
            <div class="num font-bt" style="color: #ff0000;">{{assetCount.fall}}</div>
            <div class="label font-md">失陷资产</div>
          </div>
        </div>
        <span class="position3 font-md">事件统计</span>
        <div class="position4">
          <div class="eventRange today" :class="{is_active: range === 'today'}" @click="rangeHandle('today')">今天</div>
          <div class="eventRange week" :class="{is_active: range === 'week'}" @click="rangeHandle('week')">本周</div>
          <div class="eventRange history" :class="{is_active: range === 'history'}" @click="rangeHandle('history')">累计
          </div>
        </div>
        <div class="position5">
          <div class="event-text" style="color:#00ffc8;">已处理事件{{ riskEventCount.handled.total }}件</div>
        </div>
        <div class="position6">
          <table class="layout">
            <tr class="th">
              <td>事件等级</td>
              <td>高风险</td>
              <td>中风险</td>
              <td>低风险</td>
            </tr>
            <tr>
              <td style="color:#00ffc8;">数量</td>
              <td style="color: #f30505;">{{ riskEventCount.handled.high }}</td>
              <td style="color: #ffb600;">{{ riskEventCount.handled.medium }}</td>
              <td style="color: #ffb600;">{{ riskEventCount.handled.low }}</td>
            </tr>
          </table>
        </div>

        <div class="position7">
          <div class="event-text" style="color:#ff8c00;">未处理事件{{ riskEventCount.unhandled.total }}件</div>
        </div>
        <div class="position8">
          <table class="layout">
            <tr class="th">
              <td>事件等级</td>
              <td>高风险</td>
              <td>中风险</td>
              <td>低风险</td>
            </tr>
            <tr>
              <td style="color:#ff8c00;">数量</td>
              <td style="color: #f30505;">{{ riskEventCount.unhandled.high }}</td>
              <td style="color: #daa215;">{{ riskEventCount.unhandled.medium }}</td>
              <td style="color: #daa215;">{{ riskEventCount.unhandled.low }}</td>
            </tr>
            <tr>
              <td>事件类型</td>
              <td>异常工控</td>
              <td>异常网络</td>
              <td>攻击</td>
            </tr>
            <tr>
              <td style="color:#ff8c00;">数量</td>
              <td style="color: #f30505;">{{ riskEventTypeCount.unhandled.industrial }}</td>
              <td style="color: #daa215;">{{ riskEventTypeCount.unhandled.network }}</td>
              <td style="color: #daa215;">{{ riskEventTypeCount.unhandled.attack }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="left_bottom">
      <div class="left_bottom_title">
        <div class="card_title">TOP5统计</div>
      </div>
      <div class="left_bottom_content">
        <span class="position9">TOP5流量统计</span>
        <div class="position10">
          <div class="traffic up" :class="{is_active: traffic === 'up'}" @click="trafficHandle('up')">上行</div>
          <div class="traffic down" :class="{is_active: traffic === 'down'}" @click="trafficHandle('down')">下行</div>
        </div>
        <table class="position11 layout">
          <tr class="th">
            <td>排名</td>
            <td>设备名称</td>
            <td>流量</td>
          </tr>
          <tr v-for="(traffic, index) in trafficTopFive" :key="index">
            <td><span :class="`num ${topNumMap[index + 1]}`">{{index + 1}}</span></td>
            <td>{{traffic.key}}</td>
            <td>{{traffic.value}}</td>
          </tr>
        </table>

        <span class="position12">TOP5会话统计</span>
        <table class="position13 layout">
          <tr class="th">
            <td>排名</td>
            <td>协议名称</td>
            <td>数量（个）</td>
          </tr>
          <tr v-for="(traffic, index) in sessionTopFive" :key="index">
            <td><span :class="`num ${topNumMap[index + 1]}`">{{index + 1}}</span></td>
            <td>{{traffic.key}}</td>
            <td>{{traffic.value}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import NumberCard from "@/views/components/NumberCard";
import {
  riskEventCount,
  riskEventCountToday,
  riskEventCountWeek,
  riskEventTypeCount,
  riskEventTypeCountWeek,
  riskEventTypeCountToday,
  assetCount,
  downTraffic,
  upTraffic,
  session,
} from "@/api/bigSreen";
import dayjs from "dayjs";

export default {
  name: "LeftPane",
  components: {
    NumberCard
  },
  data() {
    return {
      range: "today",
      traffic: "up",
      assetCount: {
        total: 0, // 资产总数
        normal: 0, // 正常资产
        doubtful: 0, // 可疑资产
        fall: 0 // 失陷资产
      },
      riskEventCount: {
        handled: { // 已处理
          total: 0, // 事件总数
          high: 0, // 高风险事件
          medium: 0, // 中风险事件
          low: 0 // 低风险事件
        },
        unhandled: { // 未处理
          total: 0, // 事件总数
          high: 0, // 高风险事件
          medium: 0, // 中风险事件
          low: 0 // 低风险事件
        }
      },
      riskEventTypeCount: {
        handled: { // 已处理
          total: 0, // 事件总数
          industrial: 0, // 异常工控事件
          network: 0, // 异常网络事件
          attack: 0 // 异常攻击事件
        },
        unhandled: { // 未处理
          total: 0, // 事件总数
          industrial: 0, // 异常工控事件
          network: 0, // 异常网络事件
          attack: 0 // 异常攻击事件
        }
      },
      trafficTopFive: [],
      topNumMap: {
        1: 'one',
        2: 'two',
        3: 'three',
        4: 'four',
        5: 'five',
      },
      sessionTopFive: [],
    }
  },

  computed: {
    count: {
      get() {
        const result = String(this.riskEventCount.handled.total)
        if (this.$refs.numCard) {
          this.$refs.numCard.initNumCard(result)
        }
        return result
      }
    }
  },

  created() {
    // this.getData()
  },

  methods: {
    getData() {
      this.getAssetCount()
      this.getRangeData()
      this.getTrafficData()
      this.getSession()
    },
    /**
     * 事件统计处理函数
     */
    rangeHandle(range) {
      this.range = range
      this.getRangeData()
    },
    /**
     * 流量统计处理函数
     */
    trafficHandle(traffic) {
      this.traffic = traffic
      this.getTrafficData()
    },

    getRangeData() {
      switch (this.range) {
        case "today":
          this.getToday();
          break;
        case "week":
          this.getWeek();
          break;
        case "history":
          this.getHistory();
          break;
      }
    },

    getTrafficData() {
      switch (this.traffic) {
        case "up":
          this.getUpTraffic();
          break;
        case "down":
          this.getDownTraffic();
          break;
      }
    },

    getToday() {
      this.getRiskEventCountToday()
      this.getRiskEventTypeCountToday()
    },

    getWeek() {
      this.getRiskEventCountWeek()
      this.getRiskEventTypeCountWeek()
    },

    getHistory() {
      this.getRiskEventCount()
      this.getRiskEventTypeCount()
    },

    /**
     * 异常资产统计
     * @returns {Promise<void>}
     */
    async getAssetCount() {
      try {
        const res = await assetCount()
        this.assetCount = res.data.data
      } catch (e) {
        console.log(e)
      }
    },
    /**
     * 今日异常事件统计
     * @returns {Promise<void>}
     */
    async getRiskEventCountToday() {
      try {
        const res = await riskEventCountToday()
        this.riskEventCount = res.data.data
      } catch (e) {
        console.log(e)
      }
    },
    /**
     * 本周异常事件统计
     * @returns {Promise<void>}
     */
    async getRiskEventCountWeek() {
      try {
        const res = await riskEventCountWeek()
        this.riskEventCount = res.data.data
      } catch (e) {
        console.log(e)
      }
    },
    /**
     * 历史异常事件统计
     * @returns {Promise<void>}
     */
    async getRiskEventCount() {
      try {
        const res = await riskEventCount()
        this.riskEventCount = res.data.data
      } catch (e) {
        console.log(e)
      }
    },
    /**
     * 今日事件类型统计
     * @returns {Promise<void>}
     */
    async getRiskEventTypeCountToday() {
      try {
        const res = await riskEventTypeCountToday()
        this.riskEventTypeCount = res.data.data
      } catch (e) {
        console.log(e)
      }
    },
    /**
     *  本周事件类型统计
     * @returns {Promise<void>}
     */
    async getRiskEventTypeCountWeek() {
      try {
        const res = await riskEventTypeCountWeek()
        this.riskEventTypeCount = res.data.data
      } catch (e) {
        console.log(e)
      }
    },
    /**
     * 历史事件类型统计
     * @returns {Promise<void>}
     */
    async getRiskEventTypeCount() {
      try {
        const res = await riskEventTypeCount()
        this.riskEventTypeCount = res.data.data
      } catch (e) {
        console.log(e)
      }
    },

    /**
     * 上行流量统计 TOP5
     * @returns {Promise<void>}
     */
    async getUpTraffic() {
      try {
        const res = await upTraffic({
          startTime: dayjs().startOf('day').format(),
          endTime: dayjs().endOf('day').format(),
          num: 5
        })
        this.trafficTopFive = res.data.data
      } catch (e) {
        console.log(e)
      }
    },

    /**
     * 下行流量统计 TOP5
     * @returns {Promise<void>}
     */
    async getDownTraffic() {
      try {
        const res = await downTraffic({
          startTime: dayjs().startOf('day').format(),
          endTime: dayjs().endOf('day').format(),
          num: 5
        })
        this.trafficTopFive = res.data.data
      } catch (e) {
        console.log(e)
      }
    },

    /**
     * 会话统计 TOP5
     * @returns {Promise<void>}
     */
    async getSession() {
      try {
        const res = await session({
          startTime: dayjs().startOf('day').format(),
          endTime: dayjs().endOf('day').format()
        })
        this.sessionTopFive = res.data.data
      } catch (e) {
        console.log(e)
      }
    },
  }
}
</script>
<style lang="scss">
.left {
  width: 24%;
  height: 100%;
  font-size: 14px;
  color: white;

  .left_top {
    width: 100%;
    height: 46.5%;
    margin-top: 3%;

    .left_top_title {
      width: 100%;
      height: 7%;
    }

    .left_top_content {
      width: 100%;
      height: 93%;
    }
  }

  .left_bottom {
    width: 100%;
    height: 49%;
    margin-top: 2%;

    .left_bottom_title {
      width: 100%;
      height: 7%;
    }

    .left_bottom_content {
      width: 100%;
      height: 93%;
    }
  }

  .title-tip {
    font-size: 18px;
    margin-left: 12%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    // 翻牌器
    .flop {
      color: rgba(170, 170, 170, 0.8);
      padding-right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;

      .NumberCard {
        margin: 0 5px;
      }
    }
  }

  .position1 {
    position: absolute;
    left: 2%;
    top: 12%;
  }

  .position2 {
    position: absolute;
    left: 2%;
    top: 15%;
    width: 22%;
    height: 6.5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;

    .assetNum-item {
      flex: 1;
      height: 100%;

      &.total {
        flex: 1.5;
      }

      .num {
        height: 60%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bolder;
      }

      .label {
        height: 40%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .position3 {
    position: absolute;
    left: 2%;
    top: 23%;
  }

  .position4 {
    position: absolute;
    left: 16%;
    top: 23%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .eventRange {
      padding: 5px 10px;
      background-color: #162b6c;
      cursor: pointer;

      &.is_active {
        background-color: #3d70ee;
      }
    }
  }

  .position5 {
    position: absolute;
    left: 3.5%;
    top: 26.2%;
  }

  .position6 {
    position: absolute;
    top: 28%;
    left: 1%;
    width: 23%;
    height: 7%;

    table {
      text-align: center;
      width: 100%;
      height: 100%;
    }

    .event-text {
      margin-bottom: 15px;
    }
  }

  .position7 {
    position: absolute;
    left: 3.5%;
    top: 35.2%;
  }

  .position8 {
    position: absolute;
    top: 38%;
    left: 1%;
    width: 23%;
    height: 7%;

    table {
      text-align: center;
      width: 100%;
      height: 100%;

      td {
        padding: 5px;
      }
    }

    .event-text {
      margin-bottom: 15px;
    }
  }

  .position9 {
    position: absolute;
    left: 2%;
    top: 57.8%;
  }

  .position10 {
    position: absolute;
    left: 19%;
    top: 57.3%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .traffic {
      padding: 5px 10px;
      background-color: #162b6c;
      cursor: pointer;

      &.is_active {
        background-color: #3d70ee;
      }
    }
  }

  .position11 {
    position: absolute;
    top: 60%;
    left: 1%;
    width: 23%;
    height: 7%;
    text-align: center;

    tr.th {
      color: #38baf5;
      height: 32px;
    }

    tr {
      height: 26px;
    }

    .num {
      display: inline-block;
      border-radius: 100%;
      width: 20px;
      height: 20px;
      font-size: 13px;
      background: #3bc3fe;
      color: #fff;

      &.one {
        background-color: #ffd700;
      }

      &.two {
        background-color: #bebeb9;
      }

      &.three {
        background-color: #c38135;
      }
    }
  }

  .position12 {
    position: absolute;
    left: 2%;
    top: 78%;
  }

  .position13 {
    position: absolute;
    top: 80.1%;
    left: 1%;
    width: 23%;
    height: 7%;
    text-align: center;

    tr.th {
      color: #38baf5;
      height: 32px;
    }

    tr {
      height: 26px;
    }

    .num {
      display: inline-block;
      border-radius: 100%;
      width: 20px;
      height: 20px;
      font-size: 13px;
      background: #3bc3fe;
      color: #fff;

      &.one {
        background-color: #ffd700;
      }

      &.two {
        background-color: #acaaa6;
      }

      &.three {
        background-color: #c38135;
      }
    }
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    table.layout {
      table-layout: fixed
    }
  }
}
</style>
